<template>
  <div class="notice_container">
    <el-dropdown trigger="click">
      <el-button text class="ling">
        <div class="red"></div>
        <el-icon><BellFilled /></el-icon>
      </el-button>
      <template #dropdown>
        <div class="notice_content" style="width: 390px; max-height: 600px">
          <el-card style="width: 100%; height: 100%">
            <template #header>
              <div class="card-header" style="display: flex; justify-content: space-between" >
                <div v-for="(item, index) in navTitle" :key="item"
                  :class=" active === index ? 'information navTitle' : 'navTitle' "
                  @click="tabTitle(index)" >
                  {{ item }}
                  <div class="count">
                    {{ item === "通知" ? countTotal : countNum }}
                  </div>
                </div>
              </div>
            </template>
            <div style="max-height: 400px; overflow-y: auto">
              <div class="notice-content-item" 
              v-for="(item, index) in active === 0 ? newNotice : approveNotice" 
                 :key="index"  @click="checkDetail(item)">
                <div class="Informers-big">
                  <div class="Informers">
                    通知人: {{ item.messageFromName || item.submitName }}
                  </div>
                  <div class="noticeType">
                    通知类型: {{ item.messageTypeName || item.processType }}
                  </div>
                </div>
                <div class="middle">
                  <div class="noticeTime">
                    通知时间: {{ item.notifyTime || item.createTime }}
                  </div>
                  <div class="middle-content">
                    通知内容: {{ item.messageText }}
                  </div>
                  <div style="display: flex">
                    通知范围：
                    <div v-if="item.messageWideName">
                      <span
                        style="margin-left: 12px"
                        v-for="(it, i) in item.messageWideName"
                        :key="i"
                      >
                        {{ it }}
                      </span>
                    </div>
                    <div v-else>
                      <span>{{ item.checkWide }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <template #footer>
              <div class="footer_content">
                <div class="switch_content" v-if="active === 0">
                  <el-switch
                    v-model="switchValue"
                    class="ml-2"
                    style="
                      --el-switch-on-color: #13ce66;
                      --el-switch-off-color: #dcdfe6;
                    "
                    @change="tabsSwitch"
                  />
                  只显示未读
                </div>
                <div class="right_button">
                  <el-button text @click="toNotificationCenter">
                    <el-icon><Comment /></el-icon>
                  </el-button>
                </div>
              </div>
            </template>
          </el-card>
        </div>
      </template>
    </el-dropdown>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import {
  NotificationsListApi,
  approvalReminderApi,
} from "@/api/messageNotifications/notificationsList.js";
const router = useRouter();
const active = ref(0);

const navTitle = ref(["通知", "审批提醒"]); // nav标题

const switchValue = ref(false); // switch开关
const unread = ref("2"); //  已读未读参数
const remind = ref("msg");
// 通知
const newNotice = ref([]);
const toNotificationCenter = () => {
  router.push("/notificationCenter/index");
};
const optionsList = [
  {
    value: "1",
    label: "项目信息审批",
  },
  {
    value: "2",
    label: "成果交付审批",
  },
  {
    value: "3",
    label: "归档审批",
  },
  {
    value: "4",
    label: "复盘审批",
  },
  {
    value: "5",
    label: "日报审批",
  },
  {
    value: "6",
    label: "周报审批",
  },
  {
    value: "7",
    label: "月报审批",
  },
  {
    value: "8",
    label: "回款计划审批",
  },
  {
    value: "9",
    label: "回款进度审批",
  },
];
// 消息通知列表
const pageNum = ref(1);
const pageSize = ref(9999);
const total = ref(0);

// 获取消息通知列表
const getNotificationsListApi = async () => {
  let params = {
    onlyUnread: unread.value,
    type: remind.value,
    pageNum: pageNum.value,
    pageSize: pageSize.value,
  };
  const res = await NotificationsListApi(params);
  if (res.code === 200) {
    newNotice.value = res.rows;
    total.value = res.total;
  }
};

const approveNotice = ref();

// 获取审批提醒列表
const approvalList = async () => {
  let params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
  };
  let data = {
    searchType: 2,
  };
  const res = await approvalReminderApi(params, data);
  if (res.code === 200) {
    approveNotice.value = res.rows;

    total.value = res.total;
    countNum.value = Number(res.unReadMsgNum);
  }
};

// 查看已读或未读
const tabsSwitch = () => {
  if (switchValue.value) {
    unread.value = "1";
    getNotificationsListApi();
  } else {
    unread.value = "2";
    getNotificationsListApi();
  }
};

// 查看通知或审批提醒
const tabTitle = async (index) => {
  active.value = index;
  if (active.value === 0) {
    remind.value = "msg";
    await getNotificationsListApi();
  } else {
    // remind.value = "check";
    // newNotice.value = [];
    await approvalList();
  }
};
const countTotal = ref(0); // 未读消息
const countNum = ref(0); // 未读审批提醒

const countNotice = async () => {
  let params = {
    onlyUnread: "1",
    type: "msg",
    pageNum: pageNum.value,
    pageSize: pageSize.value,
  };
  const res = await NotificationsListApi(params);
  countTotal.value = Number(res.unReadMsgNum);
};

// const countApprover = async () => {
//   let params = {
//     onlyUnread: "1",
//     type: "check",
//     pageNum: pageNum.value,
//     pageSize: pageSize.value,
//   };
//   const res = await NotificationsListApi(params);
//   console.log(res);
//   if (res.code === 200) {
//     // countNum.value = Number(res.unReadMsgNum);
//     // console.log(countNum.value, "--countNum.value--");
//   }
// };
const checkDetail = (row) => {
  // 区分会议与其他模块审批
  if (row.messageTypeName === "会议") {
    router.push({
      path: "/myProject/information-info/addfile",
      query: { id: row.dataId, name: 3, messageTypeName: row.messageTypeName },
    });
  } else if (row.messageTypeName && row.messageTypeName.includes("会议")) {
    router.push({
      path: "/myProject/information-info/addfile",
      query: { id: row.dataId, name: 3, messageTypeName: row.messageTypeName },
    });
  } else if (row.processTypeId === null) {
    router.push({
      path: "/detail",
      query: { id: row.id, name: 3, messageTypeName: row.messageTypeName },
    });
  } else {
    if (row.processTypeId === "1") {
      router.push({
        path: "/myProject/conversion-info/info",
        query: { planId: row.dataId, name: "3", showDetails: "2" },
      });
    } else if (row.processTypeId === "2") {
      router.push({
        path: "/taskManage/manage-add/add",
        query: {
          taskId: row.dataId,
          id: row.projectId,
          name: 3,
          taskDetails: "2",
        },
      });
    } else if (row.processTypeId === "3") {
      router.push({
        path: "/myProject/archive-info/add",
        query: {
          name: 3,
          state: 2,
          archivistId: row.dataId,
          Approved: 1,
        },
      });
    } else if (row.processTypeId === "4") {
      router.push({
        path: "/myProject/review/again",
        query: { id: row.dataId, name: "3" },
      });
    } else if (row.processTypeId === "5") {
      router.push({
        // 日报
        path: "/myProject/information-info/details",
        query: { id: row.dataId, type: 1, name: "3" },
      });
    } else if (row.processTypeId === "6") {
      // 周报
      router.push({
        // 日报
        path: "/myProject/information-info/details",
        query: { id: row.dataId, type: 2, name: "3" },
      });
    } else if (row.processTypeId === "7") {
      // 月报
      router.push({
        // 日报
        path: "/myProject/information-info/details",
        query: { id: row.dataId, type: 3, name: "3" },
      });
    } else if (row.processTypeId === "8") {
      router.push({
        path: "/returned/returned-add/add",
        query: { name: 3, id: row.dataId },
      });
    } else if (row.processTypeId === "9") {
      router.push({
        path: "/returned/returned-add/add",
        query: { name: 3, id: row.dataId, show: 1 },
      });
    } else if (row.processTypeId === "10") {
      // 项目立项审批
      router.push({
        path: "/myProject/approval/edit",
        query: { name: "3", id: row.dataId },
      });
    } else if (row.processTypeId === "11") {
      router.push({
        path: "/taskManage/manage-add/add",
        query: { taskId: row.dataId, name: "3", approvalTask: "1" },
      });
    } else if (row.processTypeId === "12") {
      router.push({
        path: "/myProject/conversion-info/info",
        query: { name: "3", id: row.dataId, show: "2" },
      });
    } else if (row.processTypeId === "13") {
      // 印章
      router.push({
        path: "/seal/sealEdit/sealEdit",
        query: { name: "3", sealId: row.dataId, show: "1" },
      });
    } else if(row.processTypeId === "16"){
      // 项目日志（项目日志）
      router.push({
        path: "/notice/add/noticeAdd",
        query: { name: "3", id: row.dataId,logState : "-1" }
      });
    } else {
      // 合同
      router.push({
         path: "/contract/add/add",
        query: { name: "3", id: row.dataId },
      });
    }
  }
};

let list = ref();
onMounted(async () => {
  if (active.value === 0) {
    remind.value = "msg";
    await getNotificationsListApi();
  }
  await approvalList();

  await countNotice();
});
</script>
<style scoped lang="scss">
.notice_container {
  margin-top: 6px;
}
.el-button {
  width: 36px;
  font-size: 24px;
  position: relative;
}
.ling {
  height: 100%;
}
.red {
  width: 6px;
  height: 6px;
  background: #f56c6c;
  border-radius: 50%;
  position: absolute;
  top: 6px;
  right: 6px;
}
.notice_content {
  width: 400px;
}
.navTitle {
  width: 100%;
  height: 30px;
  line-height: 20px;
  text-align: center;
  position: relative;
  .count {
    width: 16px;
    height: 16px;
    line-height: 16px;
    background: #f56c6c;
    border-radius: 50%;
    position: absolute;
    top: 0;
    right: 10px;
    color: #f2f2f2;
    font-size: 10px;
    text-align: center;
  }
}
.navTitle:hover {
  cursor: pointer;
}
.information {
  border-bottom: 2px solid #409eff;
  color: #409eff;
}
.notice-content-item {
  background: #f2f2f2;
  margin-top: 20px;
  box-sizing: border-box;
  padding: 10px;
  font-weight: 600;
  .Informers-big {
    display: flex;
    .noticeType {
      margin-left: 40px;
    }
  }
  .middle {
    margin: 10px 0;
    .middle-content {
      margin: 10px 0;
    }
  }
}
.footer_content {
  display: flex;
  justify-content: space-between;
}
</style>
